<template>
	<div class="cardContainer">
		<div class="card">
			<div
				v-for="(item, index) in videoList"
				:key="item.id"
				class="videoCardContainer"
				style="margin-bottom: 50px"
			>
				<el-card :body-style="{ padding: '0px' }">
					<img
						:src="item.moreBackup?.videos[0].cover"
						class="image"
						@click="toPlayer(item.id)"
					/>

					<div class="cardMiddle">
						<a>
							<span class="cardFlag">教程</span>
							{{ item.moreBackup?.videos[0].title }}
						</a>
						<span class="cardNum"
							>{{ item.statisticsBackup?.viewCount }}浏览</span
						>
						<div class="iconInfo">
							<span>
								<svg
									t="1666082225027"
									class="icon"
									viewBox="0 0 1024 1024"
									version="1.1"
									xmlns="http://www.w3.org/2000/svg"
									p-id="4368"
									width="20"
									height="20"
								>
									<path
										d="M621.674667 408.021333c16.618667-74.24 28.224-127.936 34.837333-161.194666C673.152 163.093333 629.941333 85.333333 544.298667 85.333333c-77.226667 0-116.010667 38.378667-138.88 115.093334l-0.586667 2.24c-13.728 62.058667-34.72 110.165333-62.506667 144.586666a158.261333 158.261333 0 0 1-119.733333 58.965334l-21.909333 0.469333C148.437333 407.808 106.666667 450.816 106.666667 503.498667V821.333333c0 64.8 52.106667 117.333333 116.394666 117.333334h412.522667c84.736 0 160.373333-53.568 189.12-133.92l85.696-239.584c21.802667-60.96-9.536-128.202667-70.005333-150.186667a115.552 115.552 0 0 0-39.488-6.954667H621.674667z"
										p-id="4369"
										fill="#b1b5c1"
									></path>
								</svg>
								{{ item.statisticsBackup?.praiseCount }}
							</span>
							<span>
								<svg
									t="1666082073268"
									class="icon"
									viewBox="0 0 1024 1024"
									version="1.1"
									xmlns="http://www.w3.org/2000/svg"
									p-id="3122"
									width="20"
									height="20"
								>
									<path
										d="M486.4 682.666667c4.266667 0 4.266667 0 0 0H725.333333c46.933333 0 85.333333-38.4 85.333334-85.333334V341.333333c0-46.933333-38.4-85.333333-85.333334-85.333333H298.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v256c0 46.933333 38.4 85.333333 85.333334 85.333334h21.333333c12.8 0 21.333333 8.533333 21.333333 21.333333s-8.533333 21.333333-21.333333 21.333333H298.666667c-72.533333 0-128-55.466667-128-128V341.333333c0-72.533333 55.466667-128 128-128h426.666666c72.533333 0 128 55.466667 128 128v256c0 72.533333-55.466667 128-128 128h-230.4l-166.4 81.066667c-8.533333 4.266667-21.333333 0-29.866666-8.533333-4.266667-8.533333 0-21.333333 8.533333-29.866667l170.666667-85.333333h8.533333z"
										p-id="3123"
										fill="#b1b5c1"
									></path>
									<path
										d="M341.333333 469.333333m-42.666666 0a42.666667 42.666667 0 1 0 85.333333 0 42.666667 42.666667 0 1 0-85.333333 0Z"
										p-id="3124"
										fill="#b1b5c1"
									></path>
									<path
										d="M512 469.333333m-42.666667 0a42.666667 42.666667 0 1 0 85.333334 0 42.666667 42.666667 0 1 0-85.333334 0Z"
										p-id="3125"
										fill="#b1b5c1"
									></path>
									<path
										d="M682.666667 469.333333m-42.666667 0a42.666667 42.666667 0 1 0 85.333333 0 42.666667 42.666667 0 1 0-85.333333 0Z"
										p-id="3126"
										fill="#b1b5c1"
									></path>
								</svg>
								{{ item.statisticsBackup?.commentCount }}
							</span>
							<span>
								<svg
									t="1666082291857"
									class="icon"
									viewBox="0 0 1024 1024"
									version="1.1"
									xmlns="http://www.w3.org/2000/svg"
									p-id="5392"
									width="20"
									height="20"
								>
									<path
										d="M576.4 203.3c46.7 90.9 118.6 145.5 215.7 163.9 97.1 18.4 111.5 64.9 43.3 139.5s-95.6 162.9-82.3 265.2c13.2 102.3-24.6 131-113.4 86.2s-177.7-44.8-266.6 0-126.6 16-113.4-86.2c13.2-102.3-14.2-190.7-82.4-265.2-68.2-74.6-53.7-121.1 43.3-139.5 97.1-18.4 169-73 215.7-163.9 46.6-90.9 93.4-90.9 140.1 0z"
										p-id="5393"
										fill="#b1b5c1"
									></path>
								</svg>
								{{ item.statisticsBackup?.userCacheCount }}
							</span>
						</div>
					</div>
					<div class="userInfo">
						<div class="left">
							<img :src="item.creatorBackup?.avatar" />
							<span>{{ item.creatorBackup?.name }}</span>
						</div>
						<div class="right">
							<span :title="dayjs(item.onsellTime).format('YYYY-MM-DD')">{{
								dayjs(item.onsellTime).format("MM-DD")
							}}</span>
						</div>
					</div>
				</el-card>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { computed, ref, onMounted, onErrorCaptured, watch } from "vue"
import { useRouter } from "vue-router"
import dayjs from "dayjs"

import { userStore } from "../../stores/lxcStore"

const store = userStore()

const videoList = ref<any>([])

// 获取路由地址
const router = useRouter()
const uni = router.currentRoute.value

let videoCardData = ref([])

const toPlayer = (id) => {
	router.push({ path: "/player", query: { id } })
}

onMounted(async () => {
	let res1 = await store.getHomeBanner()
	let res2 = await store.getSortList()
	if (uni.fullPath === "") {
		res1 = res1.filter((item, index) => {
			return item.moreBackup.videos
		})
		videoCardData.value = res1
		return
	}
	if (uni.fullPath === "/course/vip" || "/course/video" || "/course/live") {
		res2 = res2.filter((item, index) => {
			return item.moreBackup.videos
		})
		videoCardData.value = res2
		return
	}
})
watch(
	() => store.videoCardData,
	() => {
		// console.log("videoCard监听")
		let res = store.videoCardData.filter((item, index) => {
			return item.moreBackup.videos
		})
		// let addfive = res.splice(0, 6)
		// let subfive = res.slice(6)
		// console.log(addfive)
		// console.log(res)
		// res.push(addfive)
		// console.log("到底有没有返回值", res)
		videoList.value = res
	},
	{ deep: true }
)
</script>

<style scoped>
/* 有重复需要测试 */
.cardContainer {
	width: 100%;
	background-color: #f5f7f9;
	padding-top: 20px;
}

.card {
	width: 1300px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	padding-left: 50px;
}

.videoCardContainer {
	width: 224px;
	height: 280px;
	font-size: 14px;
	background-color: white;
	border-radius: 5px;
	margin-right: 20px;
}

.cardMiddle {
	padding: 10px 0 10px 13px;
	border-bottom: 1px solid #ebeced;
	height: 104px;
	box-sizing: border-box;
}

.cardMiddle .cardFlag {
	font-size: 12px;
	border: 1px solid black;
	border-radius: 4px;
	box-sizing: border-box;
	margin-right: 4px;
	display: inline-block;
	width: 26px;
	height: 16px;
	text-align: center;
	line-height: 12px;
}

.cardNum {
	display: block;
	font-size: 12px;
	line-height: 32px;
	color: #b1b5c1;
}

.iconInfo span {
	font-size: 12px;
	/* display:inline-block; */
	margin-right: 6px;
}

.iconInfo span svg {
	vertical-align: bottom;
}

.userInfo {
	width: 100%;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12px;
	padding: 0 16px;
	box-sizing: border-box;
}

.userInfo .left img {
	width: 24px;
	height: 24px;
	vertical-align: middle;
	margin-right: 5px;
	border-radius: 50%;
}

.userInfo .left span {
	display: inline-block;
	width: 60px;
	vertical-align: middle;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.image {
	width: 224px;
	height: 126px;
	display: block;
}
</style>
